<template>
  <el-dialog
    class="dia-style"
    title="详情"
    :visible.sync="open"
    :modal-append-to-body="false"
  >
  <hk-details
  labelWidth="200"
  :formData="formData"
  :detailsList="detailsList"
  >
  <template #orgType>
  {{ changeType(formData.orgType,'orgType') }}
  </template>
  <template #online>
    {{ changeType(formData.orgType,'online') }}
  </template>
</hk-details>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">返 回</el-button>
      <!-- <el-button type="primary" @click="submitForm">提 交</el-button> -->
    </div>
  </el-dialog>
</template>
<script>
import hkDetails from '@/components/HKDetails'
import {getDetail} from '@/api/accessProduct/accessSystem.js'
export default { 
  components:{hkDetails},
  props: {
    typeLists:{
      type:Object,
      default(){
        return {}
      }
    }
  },
  data() {
    return {
     
      // 是否显示弹出层
      open: false,
      detailsList:[
        {field:'orgName',label:'单位名称'},
        {field:'orgType',label:'单位类别',type:'slot'},
        {field:'secretQualification',label:'保密资质'},
        {field:'netLicenseNumber',label:'涉密证书'},
        {field:'zjgLicenseNumber',label:'综合审计证书'},
        {field:'jcqLicenseNumber',label:'监测器证书'},
        {field:'type',label:'协议类型'},
        {field:'ip',label:'IP'},
        {field:'port',label:'端口'},
        {field:'clientId',label:'会话标识'},
        {field:'online',label:'注册类型',type:'slot'},
      ],
      formData:{}
    };
  },
  computed: {
  },
  watch: {},
  created() {},
  methods: {
    show(id) {
      this.open = true;
      this.reset();
      getDetail(id).then(res=>{
        this.formData=res
      })
    },
    //  转换类型
    //  单位类别转换
    changeType(row,type){
      let currentData=[];
      if(type=='orgType'){
        currentData=this.typeLists.orgTypeList.filter(i=>{
     return row.orgType==i.value
      })
      }else if(type=='status'){
        currentData=this.typeLists.statusList.filter(i=>{
          return row.status==i.value
      })
      }else if(type=='online'){
        currentData=this.typeLists.onlineList.filter(i=>{
          return row.online==i.value
      })
      }
      if(currentData && currentData.length>0){
        return currentData[0].label
      }else{
        return "-"
      }
    },
    /** 提交按钮 */
    async submitForm() {
      this.open = false;
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.formData = {
        id: undefined,
        code: undefined,
        createDate: undefined,
        flag: undefined,
        isDeleted: undefined,
        modifiedDate: undefined,
        name: undefined,
        sort: undefined,
      };
    },
  },
};
</script>

<style scoped lang="scss">
::v-deep .el-dialog__wrapper .el-form-item {
    margin-bottom: 1px;
}
::v-deep .dia-style .el-dialog .el-dialog__body {
  padding: 55px !important;
}

::v-deep .el-icon-date:before {
  // content: "";
  margin-left: 339px;
}
::v-deep .el-input--prefix .el-input__inner {
  padding-left: 15px;
}
::v-deep .el-textarea__inner {
  resize: none;
}
::v-deep {
  
  .el-dialog__body {
    height: auto !important;
  }
  .el-dialog__footer {
    position: absolute;
    bottom: 0;
  }
}
::v-deep .el-textarea__inner {
  width: 635px;
  height: 150px;
}
::v-deep [data-v-2d25da19] .el-input--prefix .el-input__inner {
  padding-left: 39px;
}
::v-deep [data-v-2d25da19] .el-icon-date:before {
  margin-left: 11px;
}
::v-deep [data-v-369a799c] .el-input--prefix .el-input__inner {
  padding-left: 30px;
}
</style>
